<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>drap</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: red;
      cursor: move;
    }

    .box2 {
      width: 30vw;
      height: 30vh;
      margin: 0 auto;
      background-color: aquamarine;
    }
  </style>
</head>

<body>
  <div class="box1" draggable="true">1</div>
  <div class="box2">2</div>

  <script>
    // dropEffect ：当前选定的拖放操作类型，一般在可放置元素的相关事件中设置
    // effectAllowed ：提供可用的操作类型，一般在拖拽元素的相关事件中设置

    // 在浏览器中所有的元素默认都可以成为被拖动的目标，但是如果直接拖动一个目标，鼠标就会变成“禁用”的状态，这是因为拖动的目标必须要被放置到一个释放区上。简单点来说就是，要想实现拖和放就必须有一个拖动的来源目标和拖动的释放区。当一个元素被拖动的时候，会触发以下三个事件

    // drapstart(拖动开始时触发，按下鼠标)
    // drap(拖动时会反复地触发)
    // dragend(拖动结束时触发，鼠标松开)
    // 那如何来创建释放区呢，这就要借助以下四个事件了，只需要绑定前两个事件就可以创建一个释放区

    // dragenter(拖动的目标进入释放区触发)
    // dragover(拖动的目标在释放区移动时触发 100ms触发一次)
    // drapleave(拖动的目标离开释放区)
    // drop(拖动的目标在释放区释放时触发，也就是在释放区内松开了鼠标)

    const box1Dom = document.querySelector('.box1');
    const dropArea = document.querySelector('.box2');

    box1Dom.addEventListener('dragstart', function (event) {
      console.log('== dragstart ====>', event);
      event.dataTransfer.effectAllowed = 'move';

      this.style.opacity = 0.5;
      this.style.cursor = 'move';

      event.dataTransfer.setData('key', 9);
    });
    box1Dom.addEventListener('drag', function (event) {
      // console.log('== drag ====>');
    });
    box1Dom.addEventListener('dragend', function (event) {
      console.log('== dragend ====>');
      this.style.opacity = 1;
    });







    

    dropArea.addEventListener('dragenter', (event) => {
      event.dataTransfer.dropEffect = 'move';
      console.log('== dragenter ====>');
    });






    dropArea.addEventListener('dragover', (event) => {
      event.preventDefault();
      event.dataTransfer.dropEffect = 'move';
      // console.log('== dragover ====>');
    });
    dropArea.addEventListener('drop', (event) => {
      event.preventDefault();
      const v = event.dataTransfer.getData('key');
      console.log('== drop ====>', v);
    });
    dropArea.addEventListener('dragleave', (event) => {
      console.log('== dragleave ====>');
    });

    const funcStr = `return data * data;`;
    const fn = new Function('data', funcStr);
    const res = fn('9');

    console.log('==res====>', res);
  </script>
</body>

</html>